<template>
    <div class="my-orders" v-title="title">
        <div class="title" @click="back()">
            <i class="iconfont icon-fanhui"></i>
            {{title}}
        </div>
        <div class="collect-btn">
            <div class="btn-list" :class="{'checked' : page.orderType*1===2}" @click="btn(2)"><span>活动</span></div>
            <div class="btn-list" :class="{'checked' : page.orderType*1===1}" @click="btn(1)"><span>付费读</span></div>
        </div>
        <div id="mescroll" class="mescroll" v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">


            <order-list v-if="page.orderType*1===2" :orders="activityOrders"></order-list>
            <column-list v-if="page.orderType*1===1" :list="activityOrders"></column-list>
        <!--知识
        <div v-if="knowledge" class="knowledge notice-list">
            <div class="knowledge-list" v-for="book in books">
                <router-link :to="{name:'column',params:{id : book.id}}">
                    <div class="knowledge-img">
                        <img :src="$store.state.picHead + book.cover"/>
                    </div>
                    <div class="knowledge-text">{{book.title}}</div>
                </router-link>
            </div>
        </div>-->
        <!--直播
        <div v-else="!knowledge" id="noticeList" class="liveBox notice-list" >
            <div class="live-list" v-for="live in books">
                <router-link :to="{name:'liveDetails',params:{did : live.watchNo}}">
                    <div class="live-img">
                        <img :src="$store.state.picHead + live.cover">
                        <div class="liveData btn1" v-if="liveData.liveStatus === 1">未开始</div>
                        <div class="liveData btn1" v-if="liveData.liveStatus === 2">直播中</div>
                        <div class="liveData btn1" v-if="liveData.liveStatus === 3">已结束</div>
                    </div>
                </router-link>
                <div class="live-text">{{live.title}}</div>
            </div>
        </div>-->
        <!--空空如也-->
        <div class="none" v-if="None">
            <img src="../../assets/image/none.png"/>
            <p>空空如也~</p>
        </div>
        </div>
        </div>

    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    import orders from '../../component/list/order-list'
    import column from '../../component/list/act-orders'
    export default {
        components:{'order-list':orders,'column-list':column},
        data () {
            return {
                title:'我的已购',
                knowledge:true,
                page:{pageNo:1,pageSize:10,orderType:2},
                page2:{pageNo:1,pageSize:10,type:3},
                None:false,
                totalPage:'',
            }
        },
        computed: {
            //将存在store中的数据取出
            activityOrders: {
                get: function () { return this.$store.state.homeStore.activityOrders || []},
                set: function (newValue) {return newValue}
            },
        },
        mounted: function() {
            let that = this;
            that.None = false;
            that.upCallback()
        },
        methods:{
            upCallback: function () {
                const that = this;
                if(that.page.orderType*1===1){
                    that.getSingleOrders()
                }else if(that.page.orderType*1===2){
                    that.getActivityOrders()
                }
            },
            getSingleOrders:function() {
                //延时一秒,模拟联网
                const that = this;
                let store = that.$store
                userService.myBought(that.page2).then(function(res){
                    if(!res.data || !res.data.datas){
                        that.mescroll.endSuccess(0,0);
                        return
                    }
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        store.state.homeStore.activityOrders = list
                    }else{
                        for(let i in list){
                            store.state.homeStore.activityOrders.push(list[i])
                        }
                    }
                    that.activityOrders = that.$store.state.homeStore.activityOrders
                    that.page.pageNo+=1
                    that.mescroll.endSuccess(list.length);
                })
            },
            getActivityOrders:function() {
                //延时一秒,模拟联网
                const that = this;
                let store = that.$store
//                store.state.homeStore.activityOrders = []
                userService.getActivityOrders(that.page).then(function(res){
                    if(!res.data || !res.data.datas){
                        that.mescroll.endSuccess(0,0);
                        return
                    }
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        store.state.homeStore.activityOrders=res.data.datas.datas

                    }else{
                        for(let i in list){
                            store.state.homeStore.activityOrders.push(list[i])
                        }
                    }
//                    that.activityOrders = that.$store.state.homeStore.activityOrders
                    that.page.pageNo+=1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //返回
            back:function(){
                let that = this;
                that.$router.push({path:'mycenter'})
            },
            //返回
            btn:function(type){
                let that = this;
                that.page.orderType=type
                that.page.pageNo=1
                that.upCallback()
            }
        },
    }
</script>

<style lang="less" scoped>
    @import url("../../assets/css/mescroll.min.css");
    body {
        -webkit-overflow-scrolling: touch;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .my-orders{
        width:100%;
        position: relative;
        height:100%;
        .title{
            width:100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index:100;
            i{
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        #mescroll{
            position: absolute;
            top:2.28rem;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            width:100%;
            height: auto;
            overflow: auto;
            background:#F9F9F9;
            -webkit-overflow-scrolling: touch;
        }
        .collect-btn{
            width: 100%;
            height: 1.1rem;
            box-shadow: inset 0 -1px 0 0 #DDDDDD;
            background:#fff;
            .btn-list{
                width: 50%;
                height: 1.1rem;
                float: left;
                font-size: 16px;
                text-align: center;
                span{
                    margin:0 1.5rem;
                    line-height:1.1rem;
                    display: block;
                    text-align: center;
                }
            }
            .checked {
                color: #6699FF;
                span{
                    line-height:1.05rem;
                    border-bottom:2px solid #6699FF;
                }
            }
        }
        .box /deep/ .index-pay{
            width:100%;
            .passage{
                width:100%;
                .Readwrap{
                    width:100%;
                    padding: 0 0.2rem;
                    box-sizing: border-box;
                    .single-passage{
                        margin:0 0.2rem;
                    }
                }
            }
        }
        .knowledge{
            width:100%;
            padding:0.4rem 0;
            box-sizing: border-box;
            overflow:hidden;
            .knowledge-list{
                width:2.4rem;
                height:4.4rem;
                margin:0 0.46rem;
                padding-top:0.4rem;
                float:left;
                .knowledge-img{
                    width:100%;
                    height:3.2rem;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .knowledge-text{
                    width:100%;
                    height: 0.98rem;
                    font-size: 12px;
                    color: #333333;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }
        .liveBox{
            width:100%;
            padding: 0 0.3rem 1rem 0.3rem;
            box-sizing: border-box;
            overflow:hidden;
            .live-list{
                width:4.33rem;
                height:5.8rem;
                margin:0.4rem 0.133rem 0 0.133rem;
                float:left;
                .live-img{
                    width:100%;
                    height:4.33rem;
                    position: relative;
                    img{
                        width:100%;
                        height:100%;
                    }
                    .liveData{
                        padding:0.1rem;
                        background: #6699FF;
                        position:absolute;
                        left:0;
                        top:0;
                        font-size: 9px;
                        color: #FFFFFF;
                    }
                }
                .live-text{
                    width:100%;
                    height:1.06rem;
                    margin-top:0.3rem;
                    font-size: 14px;
                    color: #333333;
                    text-align: left;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }
        .none{
            width:4.13rem;
            height:4rem;
            position: fixed;
            left:0;
            right:0;
            margin:25% auto;
            img{
                width:100%;
                height:3.33rem;
            }
            p{
                text-align: center;
                margin-top:0.2rem;
                font-size: 13px;
                color: #666666;
            }
        }
    }
</style>